<template>
  <el-drawer
    size="50%"
    title="移出客群"
    direction="rtl"
    :model-value="true"
    :before-close="handleCancel"
  >
    <div class="form-wrapper">
      <el-form
        class="custom-form"
        ref="form"
        :rules="rules"
        :model="form"
        label-width="80px"
        label-position="top"
        :disabled="readOnly"
      >
        <el-form-item label="组件名称" prop="name">
          <el-input
            class="custom-input custom-input-name"
            v-model.trim="form.name"
            type="text"
            maxlength="15"
            :show-word-limit="true"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script>
import { NodeDrawerDataModel } from "@/views/workTable/dataModel/NodeDrawerDataModel";

export default {
  props: {
    dialogData: {
      type: Object,
      default() {
        return {};
      },
    },
    addNodeEventData: {
      type: Object,
      default() {
        return {};
      },
    },
    readOnly: Boolean,
  },
  emits: ["confirm", "cancel"],

  data() {
    return {
      form: {
        name: "移出客群",
        reachType: "10",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入组件名称",
          },
        ],
      },
    };
  },

  mounted() {
    if (this.dialogData && Object.keys(this.dialogData).length) {
      this.form = this.dialogData;
    }
  },

  methods: {
    handleCancel() {
      this.$emit("cancel");
    },

    handleConfirm() {
      if (!this.form.name) {
        this.$message.warning("请填写组件名称");
        return;
      }

      this.$emit(
        "confirm",
        new NodeDrawerDataModel({
          dialogData: this.form,
        })
      );
      this.handleCancel();
    },
  },
};
</script>

<style scoped lang="scss">
.form-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.custom-input-name {
  //width: 440px;
}

.custom-form {
  flex: 1;
}

</style>
